<template>
    <div  ref="buttonList" class="table-button-list" style="height:50px">
       <Xdh-form :inline="true" ref="form" :model="currentModel" :footer="false">
        <div v-if="children && children.length">
          <template v-for="(item,index) in children">
           <xdh-form-item :key="index" v-bind="item" :indexs="index" :isItem="false"></xdh-form-item>
         </template>
          
        </div>
       </Xdh-form>
    </div>
   
</template>
<script>
  import Sortable from 'sortablejs'
  import XdhForm from '@/widgets/xdh-form/xdh-form'
  import XdhFormItem from '@/widgets/xdh-form/xdh-form-item'


  export default {
    components: {
    XdhFormItem,
    XdhForm
  },
  data(){
    return {
      currentModel: {

      },
    }
  },
    props: {
      inx: {
        type: Number,
        default: 0,
      },
      type: {
        type: String,
        default: 'input',
      },
      value: {
        type: String
      },
      prop: {
        type: [String, Number],
        required: true
      },
      children: {
        type: Array,
        default:()=>[]
      },
    },
    computed: {
     
    },
    mounted() {
      this.createSort();
    },
     methods: {
         createSort(){ console.log(this.$refs.buttonList,this.prop)
            // const el = this.$refs.buttonList.$el.querySelectorAll('.table-button-list')[0];
            const el = this.$refs.buttonList;
           
            this.sortable = new Sortable(el, {
            group: {
                // 只允许放置shared的控件,禁止pull
                put: ['shared']
            },
            sort: false,
            onAdd: (e) => {
              
                // this.setSort();
                // console.log(e, '+++++++++++++++++++++', e.newIndex)
                const item = e.item._underlying_vm_
                console.log(item,'这里加入子组件',e.newIndex)
                if (item) {
                  this.handleDrops(item, e.newIndex)
                }
            }
            })
         },
         handleDrops(item, index) {
          console.log(item, index)
          if (item) {
            const defaultName = `${item.type}_${new Date().getTime()}`
            const newItem = {
              ...item,
              label: item.title,
              prop: defaultName,
              value: item.value,
              type: item.type,
            }
            console.log(newItem)
            this.$store.commit('addButtonListField', { field: newItem, index: index,tab:this.inx })
          }
        },
     }
  }
</script>